<template>
 <div>
 <div class="login-container">
        <!-- 验证码弹框 -->
        <el-dialog width="390px" append-to-body
        :visible.sync="dialogVisible"
        :show-close="false"
        :close-on-click-modal="false">
      <Captcha
        ref="dialogopen"
        :l="42"
        :r="10"
        :w="345"
        :h="200"
        :block_y="catcha.blocky"
        :imgurl="catcha.imgurl"
        :miniimgurl="catcha.miniimgurl"
        :slider-text="catcha.text"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
      />
    </el-dialog>
  </div>
 </div>
</template>

<script>
import Captcha from '../components/common/Captha'
 export default {
   name: 'Test',
   data () {
     return {
       catcha: {
        blocky: 0,
        imgurl: '',
        miniimgurl: '',
        text: '向右滑动完成拼图',
        h: 300,
        w: 350,
        sh: 45,
        sw: 55,
        // visible: false,
        modifyImg: ''
      }, // 图片验证码传值
       dialogVisible: true, // 验证码弹框
     }
   },
   props: [],
   components: {
     Captcha
   },
   created () {},
   mounted () {this.getImageVerifyCode()},
   methods: {
     getImageVerifyCode() {
      var _this = this;
      this.$axios.get('/api/hello', {
      })
      .then(res => {
        if (res) {
          // _this.catcha.blocky = res.data.yHeight
          _this.catcha.imgurl = res.data.bigImage
          _this.catcha.miniimgurl = res.data.smallImage
          this.$refs.dialogopen && this.$refs.dialogopen.reset(res.data.yHeight)
          console.log(res.data.yHeight)
        }
      })
    },
    onRefresh() {
      this.catcha.imgurl = ''
      this.catcha.miniimgurl = ''
      this.getImageVerifyCode()
      console.log("刷新了")
    },
    onFail () {
        console.log('fail')
    },
    onSuccess (left) {
        if (left > 20 && left < 160) {
          this.$refs.dialogopen.handleSuccess()
          setTimeout(() => {
          }, 1000)
        } else {
          this.$refs.dialogopen.handleFail()

        }
    },

   }
 }
</script>

<style lang="css" scoped>

</style>
